<template>
  <div>
    <ul class="list">
      <li v-for="(item, index) in data" :key="index">
        <div class="box">
          <div class="logo">
            <img v-if="item.patentType==='实用新型'" src="../../../../../assets/img/patentType-01.jpg" alt="">
            <img v-else src="../../../../../assets/img/patentType-02.jpg" alt="">
          </div>
          <h4 @click="toDetail(item)">{{item.name}}</h4>
          <p class="info">
            <span>{{item.patentType}}</span>
            <i>{{item.pingfen}}分</i>
          </p>
        </div>
      </li>
    </ul>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :current-page.sync="ipi"
      :page-size="ips"
      :total="total"
      style="text-align:center;margin-top:20px;margin-bottom:10px">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array
    }
  },
  data() {
    return {
      listData: [],
      ipi: 1,
      ips: 10,
      total: 0,
    }
  },
  watch: {
    data() {

    }
  },
  methods: {
    toDetail(item) {
      this.$router.push({
        name:'ScienceFinancePatentDetail',
        query:{
          pn: item.pn,
          title: item.name
        }
      })
    },
    handleCurrentChange(val) {
      this.ipi = val
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  list-style: none;
  li {
    display: inline-block;
    width: 25%;
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    text-align: center;
    .box {
      max-width: 273px;
      padding-bottom: 10px;
      border: 1px solid #ccc;
      margin: 0 auto;
      .logo {
        position: relative;
        width: 100%;
        height: 256px;
        background-color: #eee;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      h4 {
        line-height: 30px;
        padding: 4px 10px;
        text-align: left;
        font-weight: normal;
        font-size: 16px;
        cursor: pointer;
      }
      .info {
        position: relative;
        padding: 4px 10px;
        span {
          display: block;
          padding-right: 60px;
          text-align: left;
          font-size: 12px;
        }
        i {
          position: absolute;
          top: 0;
          right: 0;
          width: 60px;
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
}
</style>